<template>
    <search-table
        :columns="columns" :data="taskData"
        :total="taskTotal"
        :page.sync="queryInfo.pageIndex"
        :size.sync="queryInfo.pageSize"
        @change-size="changeSize"
        @change-page="changePage">
        <template slot="button-group">
            <Button type="primary" ghost @click="openEditModal()" icon="md-add" :disabled="disabledAllBtn">添加任务</Button>
        </template>
        <template slot="select-group">
            <Select filterable v-model="queryInfo.node" clearable @on-change="debounceSearch" placeholder="任务配置状态">
                <Option value="true" key="true">已配置节点</Option>
                <Option value="false" key="false">未配置节点</Option>
            </Select>
            <Select filterable v-model="queryInfo.status" clearable @on-change="debounceSearch" placeholder="任务状态">
                <Option value="completed" key="completed">已完成</Option>
                <Option value="running" key="running">运行中</Option>
                <Option value="initialized" key="initialized">初始化</Option>
                <Option value="failed" key="error">已失败</Option>
            </Select>
        </template>
        <template slot="input-group">
            <Input v-model="queryInfo.name" placeholder="名称" @on-change="debounceSearch" clearable/>
        </template>
        <!-- 创建/修改 -->
        <Edit ref="editModal" :testId="testId" @ok="handleOk"></Edit>
    </search-table>
</template>
<script>
import Edit from './edit.vue'
import { debounce } from '@/libs/utils'
import {queryTaskList,delTask} from '@/api/process/task'
import {taskMixin } from './taskMixin'
import TableTooltip from '@/view/drill_compete/page/tableTooltip.vue'
export default{
    name:'Task',
    components:{Edit,TableTooltip},
    props:['disabledAllBtn'],
    mixins:[taskMixin],
    data(){
        return{
            testId:this.$route.query.id,
            queryInfo:{
                pageIndex:1,
                pageSize:10,
                testId:this.$route.query.id,
                taskMode:'normal',
                taskType:'EYDD',
            },
            taskData:[],
            taskTotal:0,
            columns:[{
                title:'任务名称',
                key:'name',
                placement:'top-left'
            },
            {
                title:'任务配置状态',
                key:'node',
                width:100,
                render:(h,params) => {
                    return h('span',params.row.nodeName ? '已配置节点' : '未配置节点')
                }
            },
            {
                title:'人员',
                key:'taskUserList',
                render:(h,params) => {
                    return h(TableTooltip,{
                        props:{
                            width:100,
                            content:params.row.taskUserList.map(user => user.userName).join('，')
                        }
                    })
                }
            },
            {
                title:'节点名称',
                key:'nodeName',
                width:100,
                tooltip:true,
            },
            {
                title:'任务描述',
                key:'description',
                tooltip:true,
                width:400
            },
            {
                title: '任务状态',
                key: 'status',
                align:'center',
                width:60,
                placement:'top-right',
                render:(h,{row:{status}})=>{
                    return this.renderTaskStatus(h,status);
                }
            },
            {
                title: '操作',
                key: 'action',
                width: 160,
                align: 'left',
                ellipsis: true,
                placement: 'top-right',
                order: 2,
                opList:[
                    {
                        txt:'修改',
                        disabled: () => this.disabledAllBtn,
                        fun:this.openEditModal
                    },
                    {
                        type:'delete',
                        txt:'删除',
                        title: '确定要删除这个任务吗?',
                        disabled: this.disabledAllBtn,
                        fun:(data) => this.delTask(data.id),
                        tooltip:true
                    }
                ]
                // render: (h, params) => {
                //     return h('div', [
                //         h('Button', {
                //             props: {
                //                 type: 'text',
                //                 size: 'small',
                //                 disabled: this.disabledAllBtn
                                
                //             },
                //             attrs: {
                //                 title: '修改'
                //             },
                //             style: {
                //                 background: 'none',
                //                 border: 'none',
                //                 boxShadow: 'none'
                //             },
                //             on: {
                //                 click: () => {
                //                     this.openEditModal(params.row)
                //                 }
                //             }
                //         }, [
                //             h('img', {
                //                 attrs: {
                //                     src: !this.disabledAllBtn ? require('../../../../../assets/project/modifys-h.png') : require('../../../../../assets/project/modifys.png'),
                //                 },
                //                 style: {
                //                     cursor: 'pointer',
                //                     'margin-right': '5px',
                //                     'vertical-align': 'middle',
                //                     display: 'inline-block',
                //                     marginBottom: '4px',
                //                 },
                //             })
                //         ]),
                //         h('Poptip', {
                //             props: {
                //                 confirm: true,
                //                 'ok-text': "确定",
                //                 'cancel-text': "取消",
                //                 type: 'error',
                //                 size: 'large',
                //                 title: '确定要删除这个任务吗?',
                //                 transfer: true
                //             },
                //             style: {
                //                 marginLeft: '0px'
                //             },
                //             on: {
                //                 'on-ok': () => {
                //                     this.delTask(params.row.id)
                //                 }
                //             }
                //         }, [
                //             h('Button', {
                //                 props: {
                //                     type: 'text',
                //                     size: 'small',
                //                     disabled: this.disabledAllBtn
                //                 },
                //                 attrs: {
                //                     title: '删除'
                //                 },
                //                 style: {
                //                     //              marginRight: '5px',
                //                     background: 'none',
                //                     border: 'none',
                //                     boxShadow: 'none'
                //                 },
                //             }, [
                //                 h('img', {
                //                     attrs: {
                //                         src: !this.disabledAllBtn ? require('../../../../../assets/project/delNote-h.png') : require('../../../../../assets/project/delNote-d.png'),
                //                     },
                //                     style: {
                //                         cursor: 'pointer',
                //                         'margin-right': '5px',
                //                         'vertical-align': 'middle',
                //                         display: 'inline-block',
                //                         marginBottom: '4px',
                //                     },
                //                 }),
                //                 h('span', {
                //                     style: {
                //                         cursor: 'pointer',
                //                         color: !this.disabledAllBtn ? '#2d8cf0' : '#c5c8ce'
                //                     },
                //                 })
                //             ])
                //         ])

                //     ])
                // }
            }]
        }
    },
    mounted(){
        this.getTaskList()
    },
    methods:{
        handleOk(type){
            type === 'add' ? this.changePage(1) : this.getTaskList()
        },
        getTaskList(){
            queryTaskList(this.queryInfo).then(({code,data,message}) => {
                let {items:taskData = [],total:taskTotal=0} = data;;
                if(code === 1){
                    this.taskData = taskData;
                    this.taskTotal = taskTotal;
                }else{
                    this.taskData = [];
                    this.taskTotal = 0;
                    this.$Message.error(message)
                }
            }).catch(error => {
                console.log(error)
            })
        },
        delTask(id){
            delTask(id).then(({code,message}) => {
                if(code === 1){
                    this.$Message.info('删除成功')
                    this.taskData.length === 1 && this.queryInfo.pageIndex > 1 && this.queryInfo.pageIndex --
                    this.getTaskList()
                }else{
                    this.$Message.error(message)
                }
            }).catch(error => {
                this.$Message.error('删除失败')
            })
        },
        debounceSearch:debounce(function(){
            this.changePage(1);
        }),
        changePage(page){
            this.queryInfo.pageIndex = page;
            this.getTaskList();
        },
        changeSize(size){
            this.queryInfo.pageSize = size;
            this.getTaskList();
        },
        openEditModal(data){
            this.$refs['editModal'].showModal(data);
        }
    }
}
</script>
<style scoped></style>